<template>
    <div>
<!--        <el-row class="header">-->
<!--            <span class="title-medium text-importent">影像资料</span>-->
<!--        </el-row>-->
<!--        <el-row class="item">-->
<!--            <el-col-->
<!--                :span="22"-->
<!--                :offset="1"-->
<!--            >-->
<!--                <el-upload-->
<!--                    :action="dicomUploadUrl"-->
<!--                    :file-list="dicomList"-->
<!--                    :accept="dicomAccept"-->
<!--                    :before-upload="beforeDicomUpload"-->
<!--                    :on-preview="dicomPreview"-->
<!--                    :on-success="dicomUploaded"-->
<!--                    :before-remove="beforeRemove"-->
<!--                    :on-remove="fileRemoved"-->
<!--                >-->
<!--                    <el-button-->
<!--                        size="small"-->
<!--                        type="primary"-->
<!--                        :disabled='true'-->
<!--                    >选择文件</el-button>-->
<!--                    <div-->
<!--                        slot="tip"-->
<!--                        class="el-upload__tip"-->
<!--                    >{{ dicomTip }}</div>-->
<!--                </el-upload>-->
<!--            </el-col>-->
<!--        </el-row>-->
        <el-row class="header">
            <span class="title-medium text-importent">其他资料</span>
        </el-row>
        <el-row class="item">
            <el-col
                :span="22"
                :offset="1"
            >
                <el-upload
                    :action="attachmentUploadUrl"
                    :file-list="attachmentList"
                    :accept="attachmentTip"
                    :before-upload="beforeAttachmentUpload"
                    :on-preview="attachmentPreview"
                    :on-success="attachmentUploaded"
                    :before-remove="beforeRemove"
                    :on-remove="fileRemoved"
                >
                    <el-button
                        size="small"
                        type="primary"
                        :disabled='true'
                    >选择文件</el-button>
                    <div
                        slot="tip"
                        class="el-upload__tip"
                    >{{ attachmentTip }}</div>
                </el-upload>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import _ from 'lodash';

export default {
    name: 'DiagnosisMatchDetailAttachment',
    props: {
        data: Array,
        diagnosisId: Number,
    },
    data() {
        return {
            DicomPreviewURL: process.env.DicomPreviewURL, // diocm查看地址
            attachmentUploadUrl: `${process.env.ImageServiceURL}/upload`,
            dicomUploadUrl: `${process.env.DicomServiceURL}/dicom-upload`,
            dicomTip: '仅支持 .zip 格式的影像文件',
            attachmentTip: '支持 .jpeg/.png/.gif/.pdf 等格式的文件',
            dicomAccept: '.zip',
            attachmentAccept: 'image/gif,image/jpeg,image/png,application/pdf',
        };
    },
    computed: {
        dicomList() {
            if (this.data.length > 0) {
                const data = [];
                this.data.forEach((item) => {
                    if (item.type === 0) {
                        const dicom = {
                            id: item.id,
                            name: item.description,
                            url: item.url,
                            type: item.type,
                        };
                        data.push(dicom);
                    }
                });
                return data;
            }
            return [];
        },
        attachmentList() {
            if (this.data.length > 0) {
                const data = [];
                this.data.forEach((item) => {
                    if (item.type !== 0) {
                        const attachment = {
                            id: item.id,
                            name: item.description,
                            url: item.url,
                            type: item.type,
                        };
                        data.push(attachment);
                    }
                });
                return data;
            }
            return [];
        },
    },
    methods: {
        beforeDicomUpload(file) {
            if (this.data.find((item) => item.description === file.name)) {
                this.$message.warning('文件名重复！');
                return false;
            }
            return true;
        },
        beforeAttachmentUpload(file) {
            const isGIF = file.type === 'image/gif';
            const isJPEG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isPDF = file.type === 'application/pdf';

            if (!isGIF && !isJPEG && !isPNG && !isPDF) {
                this.$message.warning('文件格式不正确！');
                return false;
            }

            if (this.data.find((item) => item.description === file.name)) {
                this.$message.warning('文件名重复！');
                return false;
            }
            return true;
        },
        async attachmentUpload(file) {
            const attachment = file;
            try {
                await this.$axios({
                    method: 'POST',
                    url: '/PROXY-Remote/attachment',
                    data: attachment,
                }).then((res) => {
                    if (res.data.code === 200) {
                        console.log('upload success', res.data);
                        attachment.id = res.data.data.id;
                        this.data.push(attachment);
                    }
                });
            } catch (e) {
                throw new Error(e);
            }
        },
        async attachmentRemove(attachmentId) {
            try {
                await this.$axios({
                    method: 'DELETE',
                    url: `/PROXY-Remote/attachment/${attachmentId}`,
                }).then((res) => {
                    if (res.data.code === 200) {
                        console.log('delete success');
                    }
                });
            } catch (e) {
                throw new Error(e);
            }
        },
        dicomUploaded(file) {
            const item = {
                description: file.file,
                type: 0,
                url: file.viewer,
            };
            if (this.diagnosisId !== 0) {
                item.diagnosisId = this.diagnosisId;
                this.attachmentUpload(item);
            } else {
                this.data.push(item);
            }
        },
        attachmentUploaded(file) {
            const item = {
                description: file.name,
                type: 1,
                url: file.url,
            };
            if (this.diagnosisId !== 0) {
                item.diagnosisId = this.diagnosisId;
                this.attachmentUpload(item);
            } else {
                this.data.push(item);
            }
        },
        dicomPreview(file) {
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(this.DicomPreviewURL + file.url, '_blank', `location=no,width=${width},height=${height}`);
        },
        attachmentPreview(file) {
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(file.url, '_blank', `location=no,width=${width},height=${height}`);
        },
        beforeRemove(file) {
            if (file && file.status === 'success') {
                return this.$confirm(`确定移除 ${file.name}？`);
            }
            return true;
        },
        fileRemoved(file) {
            if (file && file.status === 'success') {
                _.remove(
                    this.data,
                    (item) =>
                        item.description === file.name &&
                        item.type === file.type
                );
                if (this.diagnosisId !== 0) {
                    this.attachmentRemove(file.id);
                }
            }
        },
    },
};
</script>

<style scoped>
.item {
    margin-top: 10px;
}

.header {
    margin-top: 20px;

    font-size: 14px;
}

.pathology-preview img {
    width: 146px;
    height: 146px;
}

.pathology-preview a,
.pathology-preview div {
    float: left;
}

.pathology-preview div.pathology-info {
    margin-left: 10px;
}
</style>
